<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>{$region['title']}</title>
    <link rel="stylesheet" href="{MODULE_URL}template/mobile/style/style1/static/css/weui.css" />
    <link rel="stylesheet" type="text/css" href="{MODULE_URL}template/mobile/style/style1/static/css/region.css" />
    <link rel="stylesheet" href="{MODULE_URL}template/mobile/style/style1/static/css/comm.css">
    <script type="text/javascript" src="{MODULE_URL}template/mobile/style/style1/static/js/zepto.js"></script>
    <script type="text/javascript" src="{MODULE_URL}template/mobile/style/style1/static/js/zepto.fix.js"></script>

    <script type="text/javascript">
    var myurl = "{php echo $this->createMobileUrl('imgupload')}";
    </script>
    <!--图片上传js-->
    <script type="text/javascript" src="{$_W['siteroot']}app/resource/js/lib/jquery-1.11.1.min.js"></script>
    
    <script type="text/javascript" src="{MODULE_URL}template/mobile/style/style1/static/js/global.js">
    </script>

    <script type="text/javascript" src="{MODULE_URL}template/mobile/style/style1/static/js/seajs-0.1.5.js">
    </script>
    <script type="text/javascript" src="{MODULE_URL}template/mobile/style/style1/static/js/newthread.js">
    </script>
    <script type="text/javascript" charset="utf-8" src="{MODULE_URL}template/mobile/style/style1/static/js/jpegmeta.js">
    </script>
    <script type="text/javascript" charset="utf-8" src="{MODULE_URL}template/mobile/style/style1/static/js/jpeg.encoder.basic.js">
    </script>
    <script type="text/javascript" charset="utf-8" src="{MODULE_URL}template/mobile/style/style1/static/js/image_compress.js">
    </script>
    <style type="text/css">
    .tab_title {
        padding: 0px;
        width: 100%;
        display: -moz-box;
        display: -webkit-box;
    }
    
    .tab_title a {
        display: block;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        text-align: center;
        height: 40px;
        line-height: 40px;
        border-right: 1px solid #e4e4e4;
        border-bottom: 1px solid #e4e4e4;
        font-size: 14px;
    }
    
    .tab_title a:last-child {
        border-right: none;
    }
    
    .tab_title a.active {
        color: #EB233F;
        font-size: 16px;
        background: url({MODULE_URL}template/mobile/style/style1/static/image/hongjiao.png) 0px 0px no-repeat #fff;
        background-size: 16px;
    }
    
    #btn_div {
        position: fixed;
        height: 50px;
        z-index: 990;
        right: 0px;
        bottom: 120px;
    }
    
    .btn_img {
        background:url({MODULE_URL}template/mobile/style/style1/static/image/menu_btn.png) no-repeat;
        width: 30px;
        height: 30px;
        background-size: 30px;
        display: inline-block;
        margin: 10px;
        -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
    }
    
    #btn_dj {
        height: 50px;
        width: 50px;
        background: #48b54e;
        position: absolute;
        right: 0px;
        top: 0px;
        z-index: 100;
    }
    
    .menu_btn {
        height: 50px;
        padding: 5px 0px 5px 5px;
        font-size: 14px;
        background: #48b54e;
        color: #fff;
        position: absolute;
        right: 50px;
        width: 247px;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        z-index: 80;
    }
    
    .menu_btn a {
        display: inline-block;
        color: #fff;
        border-right: 1px solid #fff;
        text-align: center;
        width: 80px;
        height: 100%;
        line-height: 40px;
    }
    
    .hide_b {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    
    .show_b {
        -moz-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }
    
    .hide_m {
        -moz-transform: translateX(297px);
        -webkit-transform: translateX(297px);
        opacity: 0;
    }
    
    .show_m {
        -moz-transform: translateX(0px);
        -webkit-transform: translateX(0px);
        opacity: 1;
    }
    
    .nav-ul li:hover {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    
    .nav {
        clear: both;
        width: 100%;
    }
    
    .nav-ul {
        margin: 8px 8px 0 2px;
        overflow: hidden;
    }
    
    .nav-ul li {
        float: left;
        width: 6.1em;
        height: 6.1em;
        margin: 0.5em 1.2em 1em 0;
        box-sizing: border-box;
        position: relative;
    }
    
    .nav-ul li div {
        width: 100%;
        height: 100%;
        line-height: 32px;
        font-size: 12px;
        text-align: center;
        background:url({MODULE_URL}template/mobile/style/style1/static/image/add-img.jpg) no-repeat center;
        background-size: 100%;
    }
    
    .nav-ul li div img {
        margin: 0 !important;
        width: 100%;
        height: 100%
    }
    /*添加图片*/
    
    .addimg {
        width: 65px;
        height: 65px;
        background: url({MODULE_URL}template/mobile/style/style1/static/image/ico_03.png) center no-repeat;
        background-size: 65px;
        opacity: 0;
    }
    
    .addimg_div {
        width: 65px;
        height: 65px;
        background: url({MODULE_URL}template/mobile/style/style1/static/image/ico_03.png) center no-repeat;
        background-size: 65px;
        float: left;
        margin-top: 5px;
    }
    
    .addimg_div input {
        width: 65px !important;
        height: 65px !important;
    }
    
    .pjadd_img {
        float: left;
    }
    
    .pjadd_img dd {
        float: left;
        position: relative;
        margin-top: 5px;
    }
    
    .pjadd_img img {
        width: 65px;
        height: 65px;
        display: block;
        margin-right: 5px;
    }
    
    .pjimg_div {
        width: 228px;
        overflow: hidden;
        padding: 0px 8px 0px 8px;
    }
    
    .close_img {
        width: 20px;
        height: 20px;
        background: #FF3E3E;
        color: #fff;
        display: inline-block;
        text-align: center;
        line-height: 20px;
        font-size: 20px;
        border-radius: 10px;
        position: absolute;
        z-index: 10;
        top: -5px;
        right: 2px;
    }
    
    .imgup_loading {
        width: 65px;
        height: 65px;
        display: block;
        margin-right: 12px;
        border: 1px solid #dbdbdb;
        color: #999;
        text-align: center;
        line-height: 64px;
        font-size: 12px;
    }
    
    .rep_sub {
        display: block;
        width: 50%;
        margin: 10px 25%;
        background: #008CD6;
        height: 40px;
        font-size: 16px;
        color: #fff;
        border-radius: 8px;
        border: 1px solid #007ec0;
    }
    </style>
</head>

<body>
    <header id="header">
        <div class="header_div">
            <div id="left_div" onClick="window.location.href='{php echo $this->createMobileUrl('repair',array('op' => 'list'))}'"></div>
            <div id="middle_div">
                <h1 id="title">我要报修</h1></div>
            <div id="right_div">
                <div class="right_bottom"></div>
                <div class="right_img"></div>
            </div>
        </div>
    </header>
    <div class="cont">
    <form role="form" method="post" enctype="multipart/form-data" name="newthread" id="newthread" class="form-horizontal">
        <div class="weui_cells weui_cells_form">
            <div class="weui_cell weui_cell_select">
                <div class="weui_cell_bd weui_cell_primary">
                    <select class="weui_select" name="category" id="category">
                        <option>请选择报修类型</option>
                        {loop $categories $category}
                        <option value="{$category['name']}" {if $category['name']==$item['category']} selected{/if}>{$category['name']}</option>
                        {/loop}
                    </select>
                </div>
            </div>
            <div class="weui_cell">
                <div class="weui_cell_hd">
                    <label class="weui_label">地址</label>
                </div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="text" value="{$member['address']}" id="address" />
                </div>
            </div>
            <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <textarea class="weui_textarea" placeholder="长度5-200个字之间.写下详细的报修内容,有助于我们的工作人员快速帮你解决问题." rows="3" name="content" id="content"></textarea>
                    <div class="weui_textarea_counter"><span>0</span>/200</div>
                </div>
            </div>
            <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <!-- <div class="pjimg_div">
                        <dl class="pjadd_img">
                        </dl>
                        <div class="addimg_div">
                            <input class="addimg" type="file" id="j-file" accept="image/jpeg" />
                        </div>
                    </div> -->
                    <div class="tipLayer">
                        <div class="photoList">
                            <ul>
                                <li class="on" id="addPic">
                                    <input type="file" class="on needsclick" style="z-index:200;opacity:0;filter:alpha(opacity=0);-ms-filter:'alpha(opacity=0)';" id="uploadFile" accept="image/*" single>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </form>
        <div class="bd spacing" style="text-align:center;margin-top:10px;">
            <a href="javascript:;" class="weui_btn weui_btn_primary" id="showToast" style="width:80%">提交信息</a>
        </div>
        <div id="toast" style="display: none;">
            <div class="weui_mask_transparent"></div>
            <div class="weui_toast">
                <i class="weui_icon_toast"></i>
                <p class="weui_toast_content">成功提交</p>
            </div>
        </div>
    </div>
    {template 'style/style1/footer'}
    <!--右边点击菜单-->
    {php $member = $this->changemember();$region = pdo_fetch("SELECT * FROM".tablename('xcommunity_region')."WHERE id=:id",array(':id' => $member['regionid']));}
    <div id="btn_div">
        <div id="btn_dj"><span id="btn_input" class="btn_img hide_b"></span></div>
        <div id="menu_b" class="menu_btn hide_m"><a href="tel:{$region['linkway']}">电话报修</a><a href="{php echo $this->createMobileUrl('repair',array('op' => 'add'))}">在线报修</a><a href="{php echo $this->createMobileUrl('repair',array('op' => 'my'))}">我的报修</a></div>
    </div>
    <script>
    $(function() {

        $("#btn_dj").click(function() {
            var input_btn = $("#btn_input")
            if (input_btn.attr("class") == "btn_img hide_b") {
                input_btn.removeClass();
                input_btn.addClass("btn_img show_b");
            } else {
                input_btn.removeClass();
                input_btn.addClass("btn_img hide_b");
            }
            var menu_b = $("#menu_b")
            if (menu_b.attr("class") == "menu_btn hide_m") {
                menu_b.removeClass();
                menu_b.addClass("menu_btn show_m");
            } else {
                menu_b.removeClass();
                menu_b.addClass("menu_btn hide_m");
            }
        })
    })
    </script>
    <script type="text/javascript">
    $(function() {
        $("#showToast").click(function(event) {
            var content = $("#content").val();
            if (content == '') {
                alert('描述不能为空！');
                return false
            };
            if (content.length <= 5 || content.length >= 200) {
                alert('描述必须大于5个小于200个字');
                return false
            };
            var category = $("#category").val();
            var address = $("#address").val();
            var picIds ='';
            $('input[name="picIds[]"]').each(function(){
                var t1 = $(this).val();
                   picIds += t1+',';
            });
            $.ajax({
                url: "{php echo $this->createMobileUrl('repair',array('op' => 'add'))}",
                dataType: 'json',
                data: {
                    content: content,
                    category: category,
                    address: address,
                    picIds :picIds
                },
                success: function(s) {
                    if (s.status == 1) {
                        $('#toast').show();
                        setTimeout(function() {
                            $('#toast').hide();
                            window.location.href="{php echo $this->createMobileUrl('repair',array('op' => 'list'))}";
                        }, 3000);
                    };
                }
            })


        });
    })
    </script>
    <script>
    $(function() {
        select('a1');
    });
    </script>
</body>

</html>
